{extend name="base"}
{block name="main"}
<div id="app" v-cloak>
    <el-row class="ws-quote">
        <el-col :span="24" >
            <el-button type="primary" size="small" @click="add">新增优惠卷</el-button>
            <span style="padding-left: 20px; color: #f40">注：总量设为 0 ，则不限量。有效期为 0 ，则永久有效</span>
        </el-col>
    </el-row>
    <el-table :data="tableData" border stripe>
        <el-table-column prop="id" label="ID" align="center" width="70" sortable></el-table-column>
        <el-table-column prop="title" label="优惠卷"></el-table-column>
        <el-table-column prop="remark" label="说明"></el-table-column>
        <el-table-column prop="value" label="价值" align="center"></el-table-column>
        <el-table-column label="可用临界额">
            <template slot-scope="v">
                满{{v.row.usable}}可用
            </template>
        </el-table-column>
        <el-table-column prop="maxs" label="总量" align="center">
            <template slot-scope="v">
                <el-tag type="success" size="mini" v-if="!v.row.maxs">不限量</el-tag>
                <template v-else>{{v.row.maxs}}</template>
            </template>
        </el-table-column>
        <el-table-column prop="nums" label="已领取数量" align="center"></el-table-column>
        <el-table-column label="剩余数量" align="center">
            <template slot-scope="v">
                <el-tag type="success" size="mini" v-if="!v.row.maxs">不限量</el-tag>
                <template v-else>{{v.row.maxs-v.row.nums}}</template>
            </template>
        </el-table-column>
        <el-table-column prop="expire" label="有效期" align="center">
            <template slot-scope="v">
                <template v-if="v.row.expire>0">
                    {{v.row.expire}}天
                </template>
                <template v-else>
                    永久有效
                </template>
            </template>
        </el-table-column>
        <el-table-column label="状态" sortable align="center">
            <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.status">启用</el-tag>
                <el-tag type="info" v-else>禁用</template>
            </template>
        </el-table-column>
        <el-table-column label="类型" sortable align="center">
            <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.type">特殊优惠卷</el-tag>
                <el-tag type="info" v-else>通用优惠卷</template>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
                <el-button type="danger" size="mini" class="ws-mini" @click="onGet('{:url(\'del\')}?id='+scope.row.id,true)">删除</el-button>

                <el-button type="danger" size="mini" class="ws-mini" @click="close(scope.row)" v-if="scope.row.status">禁用</el-button>
                <el-button type="primary" size="mini" class="ws-mini" @click="close(scope.row)" v-else>启用</el-button>

                <el-button type="primary" size="mini" class="ws-mini" @click="edit(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="page">{$list->render()|raw}</div>

    <!-- 添加、编辑分组 start -->
    <el-dialog :title="dialogTitle" width="500px" :visible.sync="addDialog">
        <el-form ref="forms" :model="data" :rules="rules" label-width="130px">
            <el-form-item label="名称" prop="title">
                <el-input v-model="data.title" placeholder="优惠卷名称"></el-input>
            </el-form-item>
            <el-form-item label="可用临界" prop="usable">
                <el-input v-model="data.usable" placeholder="例：99 表示满99可用"></el-input>
            </el-form-item>
            <el-form-item label="价值" prop="value">
                <el-input v-model="data.value" placeholder="价值"></el-input>
            </el-form-item>
            <el-form-item label="总数量" prop="maxs">
                <el-input-number :min="0" v-model="data.maxs" placeholder="数量(-1 不限定)"></el-input-number>
            </el-form-item>
            <el-form-item label="已领数量" prop="nums">
                <el-input-number :min="0" v-model="data.nums" placeholder="已领数量"></el-input-number>
            </el-form-item>
            <el-form-item label="有效期(单位：天)" prop="expire">
                <el-input-number v-model="data.expire"></el-input-number>
            </el-form-item>
            <el-form-item label="说明" prop="remark">
                <el-input v-model="data.remark" placeholder="说明"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="data.status">
                    <el-radio :label="0">禁用</el-radio>
                    <el-radio :label="1">启用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="类型">
                <el-radio-group v-model="data.type">
                    <el-radio :label="0">通用优惠卷</el-radio>
                    <el-radio :label="1">特殊优惠卷</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialog = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit('forms','{:url(\'add\')}')">提 交</el-button>
        </div>
    </el-dialog>
    <!-- 添加、编辑分组 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        tableData:{$list->toJson()|raw}, // 列表数据
        data:{}, // 添加、编辑数据
        addDialog:false, // 显示添加、编辑框
        dialogTitle:'添加优惠卷', // 添加、编辑框标题
        rules:{
            name:{required:true,message:'分组名称不能为空'}
        },
    },
    created(){
        
    },
    methods:{
        emptyData(newData={}){
            this.data=Object.assign({
                title:'',
                remark:'',
                usable:'',
                value:5,
                maxs:0,
                nums:0,
                expire:'',
                status:1,
                type:0,
            },newData);
        },
        // 素材组编辑
        add(row){
            this.emptyData();
            this.dialogTitle='添加优惠卷';
            this.addDialog=true;
        },
        // 素材组编辑
        edit(row){
            this.emptyData(row);
            this.dialogTitle='编辑优惠卷';
            this.addDialog=true;
        },
        
        // 素材组启用、禁用
        close(row){
            this._wspost("{:url('close')}",{id:row.id},res=>{
                if(res.code){
                    row.status=Math.abs(row.status-1);
                }
            },false);
        },
    },
});
</script>
{/block}